import React, { useState, useEffect } from 'react'
import { Button,  Spin, List, Avatar, Empty, Tooltip, Popover, message } from 'antd'
import Link from 'next/link'
import { storage } from '@/utils/utils'
import PopoverCard from '../popover-card'
import messageModel from 'pages/model/message'
import NoFans from '@/public/images/noFans.svg'
import userInfoModel from '../model/user-info'

function UserFans (porps) {
  const { id } = porps
  const [loading, setLoading] = useState(false)
  const [updateStatus, setUpdateStatus] = useState(false)
  const [listData, setListData] = useState([])
  console.log(id)
  useEffect(() => {
    setLoading(true)
    userInfoModel.getUserFans({
      data: {
        id,
        loginId: JSON.parse(storage.get('next_blog_userInfo'))?.id
      }
    }).then(({datas}) => {
      if (datas && datas.list) {
        console.log(datas.list)
        setListData(datas.list)
        setLoading(false)
      }
    })
  }, [id, updateStatus])
  const replaceUserRelationship = (userId, status) => {
    if (status === 0) {
      messageModel.addMessage({
        data: {
          userId,
          loginId: JSON.parse(storage.get('next_blog_userInfo'))?.id,
          type: 1
        }
      }).then(data => {
        console.log(data)
      })
    }
    userInfoModel.replaceUserRelationship({
      data: {
        id: userId,
        loginId: JSON.parse(storage.get('next_blog_userInfo'))?.id,
        status: status === 1 ? 0 : 1
      }
    }).then(data => {
      if (data.success) {
        message.destroy()
        message.success(data.message)
        setUpdateStatus(!updateStatus)
      }
    })
  }
  return (
    <div>
      <Spin spinning={loading}>
        {
          listData.length ? 
            <List
              itemLayout="horizontal"
              dataSource={listData}
              renderItem={item => (
                !(JSON.parse(storage.get('next_blog_userInfo'))?.id === item.id) && <List.Item actions={[<Tooltip key="btn" title={item.mutualConcern === 1 ? '取消关注' : '关注Ta'}><Button style={{background: '#8590a6', borderColor: '#8590a6', width: 110, height: 34}} onClick={() => replaceUserRelationship(item.id, item.mutualConcern)}  type="primary" >{item.mutualConcern === 1 ? '已关注' : '关注'}</Button></Tooltip>]}>
                  <List.Item.Meta
                    avatar={<Popover destroyTooltipOnHide={true} content={<PopoverCard avatar={item.avatar} type={0} username={item.username} job={item.job} province={item.province}  city={item.city} id={item.id} setFn={setUpdateStatus} status={updateStatus}></PopoverCard>}><Avatar src={item.avatar} /></Popover>}
                    title={<Link  prefetch href={{pathname: '/user-info', query: {id: item.id}}}>{item.username}</Link>}
                    description={<span>{item.province} · {item.city} 丨{item.job}</span>}
                  />
                </List.Item>
              )}
            />
            :
            <Empty
              image={NoFans.src}
              imageStyle={{
                height: 60,
              }}
              description={
                <span style={{color: '#808795'}}>
                还没有用户关注Ta哟~
                </span>
              }
            >
            </Empty>  
        }
      </Spin>
    </div>
  )
}

export default  UserFans